<!-- 移除群成员 -->
<template>
  <a-modal
    :visible="props.visible"
    :width="800"
    title="离职申请"
    @cancel="handleCancel"
    @ok="handleBeforeOk"
  >
    <div>
      <a-form
        :model="formData.data"
        auto-label-width
        ref="formRef"
        :rules="rules"
      >
        <a-form-item field="leavePersonId" label="离职人员姓名" show-colon>
          <a-select
            placeholder="请选择"
            :popup-visible="false"
            @popup-visible-change="showHumanModal"
            v-model="formData.data.leavePersonId"
          >
            <a-option
              v-for="item in humanRoster"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="handoverType" label="工作交接类型" show-colon>
          <a-radio-group v-model="formData.data.handoverType">
            <a-radio :value="1">需工作交接</a-radio>
            <a-radio :value="2">无需工作交接</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </div>
    <HumanRosterModal
      style="z-index: 9999"
      v-model:visible="humanModalVisible"
      @humanRosterEmit="humanRosterEmit"
      typeName="1,2,3,4,5,6,7,8,9,10,11,12"
    ></HumanRosterModal>
  </a-modal>
</template>
<script setup lang="ts">
import clonedeep from 'lodash.clonedeep';
import {
  getAllHumanRoster,
  getOrganizationDetailById,
  getPositionDetailById,
  getHumanDetail
} from '@/utils/common';
const props = withDefaults(
  defineProps<{
    visible?: boolean;
  }>(),
  {}
);
const emit = defineEmits(['update:visible', 'applyEmit']);

let formRef = ref();
const rules = {
  leavePersonId: [
    {
      required: true,
      message: '请选择离职人员姓名'
    }
  ],
  handoverType: [
    {
      required: true,
      message: '请选择工作交接类型'
    }
  ]
};

const formData = reactive({
  data: {
    leavePersonId: undefined, // 离职人员姓名
    handoverType: 2 // 工作交接类型
  }
});

let humanRoster = ref([]); // 所有人员数据
const getData = async () => {
  try {
    const humanRosterRes = await getAllHumanRoster();
    humanRoster.value = humanRosterRes;
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();
watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      formData.data = {
        leavePersonId: undefined, // 离职人员姓名
        handoverType: 2 // 工作交接类型
      };
    }
  }
);

let humanModalVisible = ref(false); // 人员选择弹出框
// 选择离职人员弹框
const showHumanModal = () => {
  humanModalVisible.value = true;
};

const humanRosterEmit = (record: any) => {
  formData.data.leavePersonId = record.id;
};
// 关闭弹窗
const close = () => {
  emit('update:visible', false);
};
const handleCancel = () => {
  close();
};
const handleBeforeOk = async () => {
  if (await formRef.value?.validate()) {
    return;
  }
  emit('applyEmit', formData.data);
  close();
};
</script>
<style lang="less" scoped></style>
